<template>
  <div class="hello-world">
    <h2 class="text-2xl font-bold mb-4">{{ title }}</h2>
    <p class="text-gray-600">{{ message }}</p>
    <button @click="onClick" class="mt-4 btn-primary">点击我</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Props
const props = defineProps<{
  title: string;
  message: string;
}>();

// Emits
const emit = defineEmits<{
  (e: 'click', value: string): void;
}>();

// State
const count = ref(0);

// Methods
const onClick = () => {
  count.value++;
  emit('click', `按钮被点击了 ${count.value} 次`);
};
</script>

<style scoped lang="scss">
.hello-world {
  background-color: #f0f9ff;
  border-radius: 8px;
  padding: 2rem;
  border: 1px solid #e0f2fe;

  h2 {
    color: #0369a1;
  }
}
</style>